<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

- relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，
           相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，
           相对于浏览器窗口进行定位。
- static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
- inherit 从父元素继承 position 属性的值。

定位元素偏移

定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。

定位元素层级

定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

实例代码：

    .box01{
        ......
        position:absolute;  /* 设置了绝对定位 */
        left:200px;            /* 相对于参照元素左边向右偏移200px */
        top:100px;          /* 相对于参照元素顶部向下偏移100px */
        z-index:10          /* 将元素层级设置为10 */
    }

定位元素特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素



CSS权重

     -->



     <!-- 
         CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000

2、内联样式，如：style=””，权重值为1000

3、ID选择器，如：#content，权重值为100

4、类，伪类和属性选择器，如： content、:hover 权重值为10

5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1

6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

权重参考博客

https://www.jianshu.com/p/dc97ef9d1fe6

      -->
</body>
</html>